<template>
    <el-container>
        <el-header>
            <el-row>
                <el-col :span="12"><i class="el-icon-arrow-left" @click="$router.back(-1)"></i></el-col>
                <el-col :span="8"><span class="name-title">{{user.name}}</span></el-col>
                <el-col :span="4">
                    <i class="el-icon-edit" @click="handleEdit"></i>
                    <i class="el-icon-delete" @click="handleDelete"></i>
                </el-col>
            </el-row>
        </el-header>
        <el-container>
            <el-aside width="300px" class="user-header-bg">
                <img src="@/assets/user.png"
                     style="width: 150px;height: 150px"></el-aside>
            <el-main class="user-info-bg">
                <el-row>
                    <el-col :span="8">编号：{{'NH000000'+user.id}}</el-col>
                    <el-col :span="8">性别：{{user.sex?user.sex.name:'暂无'}}</el-col>
                    <el-col :span="8">年龄：{{user.age}}</el-col>
                </el-row>
                <el-row class="user-row">
                    <el-col :span="8">身份证号：{{user.idNo}}</el-col>
                    <el-col :span="8">出生日期：{{user.birthDate}}</el-col>
                    <el-col :span="8">手机号：{{user.mobile}}</el-col>
                </el-row>
                <el-row class="user-row">
                    <el-col :span="8">地址：{{user.address}}</el-col>
                    <el-col :span="8">文化程度：{{user.diploma?user.diploma.name:'暂无'}}</el-col>
                    <el-col :span="8">是否贫困户：{{user.poorFlag?'是':'否'}}</el-col>
                </el-row>
                <el-row class="user-row">
                    <el-col :span="8">土地产权证编号：{{user.groundCertNo?user.groundCertNo:'暂无'}}</el-col>
                    <el-col :span="8">所属合作社：{{user.cooperativeName}}</el-col>
                    <el-col :span="8">开户行：{{user.bankName?user.bankName:'暂无'}}</el-col>
                </el-row>
                <el-row class="user-row">
                    <el-col :span="8">银行卡号：{{user.bankNo?user.bankNo:'暂无'}}</el-col>
                    <el-col :span="8">紧急联系人：{{user.emergencyContact?user.emergencyContact:'暂无'}}</el-col>
                    <el-col :span="8">紧急联系人电话：{{user.emergencyContactPhone?user.emergencyContactPhone:'暂无'}}</el-col>
                </el-row>
            </el-main>
        </el-container>
        <!--土地列表-->
        <el-container>
            <div class="ground-bg">
                <!--<el-header style="height:40px;margin-top: 50px;margin-bottom:10px;background-color:#409EFF">-->
                <!--<div style="line-height: 40px;color: white">他的地块</div>-->
                <!--</el-header>-->
                <Ground :userId="userId"></Ground>
            </div>
        </el-container>
        <AddAndEdit
                v-model="addAndEditValue"
                @on-show-change="addAndEditDone"
        />
    </el-container>
</template>
<script>
    import Ground from "@/views/platform/ground/index";
    import AddAndEdit from "./AddAndEdit";

    export default {
        components: {
            Ground: Ground,
            AddAndEdit: AddAndEdit
        },
        data() {
            return {
                userId: 0,
                user: {},
                addAndEditValue: {
                    show: false,
                    user: {id: 0}
                }
            }
        },
        mounted() {
            this.userId = Number(this.$route.query.userId);
            this.loadFarmer(this.userId);
        },
        methods: {
            loadFarmer(userId) {
                this.$api.farmer.detail(userId, result => {
                    this.user = result.farmer;
                    this.user.birthDate = this.user.birthDate?this.$format(new Date(this.user.birthDate), "yyyy-MM-dd"):'暂无';
                })
            },
            addAndEditDone(data) {
                this.addAndEditValue.show = data.visible;
                this.loadFarmer(this.user.id);
            },
            handleEdit() {
                this.addAndEditValue = {show: true, user: this.user};
            },
            handleDelete() {
                this.$confirm("此操作将删除该用户, 是否继续?", "删除提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(() => {
                    this.$api.farmer.delete(this.userId, () => {
                        this.$message({
                            type: "success",
                            message: "删除用户成功"
                        });
                        this.$router.push({path: "/farmer"})
                    });
                });
            },
        }
    }
</script>
<style scoped>
    .user-row {
        margin-top: 10px
    }

    .ground-bg {
        width: 100%;
        margin-top: 50px;
    }

    .el-icon-edit {
        margin-left: 50px;
        font-size: 20px;
        color: dodgerblue;
        cursor: pointer;
    }

    .name-title {
        font-size: 20px;
        font-weight: bold
    }

    .el-icon-delete {
        font-size: 20px;
        color: red;
        margin-left: 30px;
        cursor: pointer;
    }

    .user-header-bg {
        margin-top: 15px;
        margin-left: 5%
    }

    .user-info-bg {
        font-size: 14px;
        color: #545c64
    }
</style>